<template>
  <div class="order-detail">
    <el-card>
      <template #header>
        <div class="card-header">
          <span>订单详情</span>
          <el-button @click="goBack">
            <el-icon><ArrowLeft /></el-icon>
            返回
          </el-button>
        </div>
      </template>
      
      <el-descriptions :column="2" border>
        <el-descriptions-item label="订单号">{{ order.id }}</el-descriptions-item>
        <el-descriptions-item label="客户姓名">{{ order.customerName }}</el-descriptions-item>
        <el-descriptions-item label="产品名称">{{ order.productName }}</el-descriptions-item>
        <el-descriptions-item label="订单金额">
          <el-text type="primary" size="large">¥{{ order.amount }}</el-text>
        </el-descriptions-item>
        <el-descriptions-item label="订单状态">
          <el-tag :type="getStatusType(order.status)">
            {{ getStatusText(order.status) }}
          </el-tag>
        </el-descriptions-item>
        <el-descriptions-item label="创建时间">{{ order.createdAt }}</el-descriptions-item>
        <el-descriptions-item label="备注" :span="2">
          {{ order.remark || '无' }}
        </el-descriptions-item>
      </el-descriptions>
      
      <div class="actions" style="margin-top: 20px;">
        <el-button type="primary" @click="editOrder">
          编辑订单
        </el-button>
        <el-button type="success" @click="completeOrder" v-if="order.status === 'pending'">
          完成订单
        </el-button>
        <el-button type="danger" @click="cancelOrder" v-if="order.status === 'pending'">
          取消订单
        </el-button>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import { ArrowLeft } from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()

const order = ref({
  id: '',
  customerName: '',
  productName: '',
  amount: 0,
  status: '',
  createdAt: '',
  remark: ''
})

const getStatusType = (status: string) => {
  const statusMap: Record<string, string> = {
    pending: 'warning',
    completed: 'success',
    cancelled: 'danger'
  }
  return statusMap[status] || 'info'
}

const getStatusText = (status: string) => {
  const statusMap: Record<string, string> = {
    pending: '待处理',
    completed: '已完成',
    cancelled: '已取消'
  }
  return statusMap[status] || '未知'
}

const loadOrder = () => {
  const orderId = route.params.id as string
  // 模拟数据
  Object.assign(order.value, {
    id: orderId,
    customerName: '张三',
    productName: 'iPhone 15',
    amount: 7999,
    status: 'pending',
    createdAt: '2024-01-15 10:30:00',
    remark: '客户要求尽快发货'
  })
}

const goBack = () => {
  router.back()
}

const editOrder = () => {
  ElMessage.info('编辑功能开发中')
}

const completeOrder = () => {
  order.value.status = 'completed'
  ElMessage.success('订单已完成')
}

const cancelOrder = () => {
  order.value.status = 'cancelled'
  ElMessage.success('订单已取消')
}

onMounted(() => {
  loadOrder()
})
</script>

<style scoped>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>